<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'mortgage.label', default: 'Mortgage')}"/>
    <title>风险预警</title>
    <style>
        #sixStart{
            width:100%;
            height:283px;
            text-align: center;
        }
        #sixStarta{
            width:100%;
            height:283px;
            text-align: center;
        }
        .warningBg{
            /*background-color: #f00;*/
            /*background: url(../../images/split.png) center center no-repeat!important;*/
            display: flex;
            justify-content: center;
        }
        .warningText{
            position: absolute;
            top: 70px;
            font-size: 16px;
            z-index: 3;
        }
        .splitImage{
            position: absolute;
            top: 35px;
            z-index: 1;
        }
        .titleImage{
            height:150px;
            z-index: 2;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            border-top: none;
        }

    </style>
</head>

<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>风险预警</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                待办事项
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="col-md-8">
        <div class="hpanel hgreen">
            <div class="panel-heading hbuilt">
                %{--<i class="fa fa-bell-o text-danger"></i> --}%
                预警数量
            </div>

            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table text-left">
                        <tbody>
                            <tr>
                                %{--<td>--}%
                                    %{--<i class="fa fa-exclamation-triangle" style="color: #f8d750"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="priceFluctuationsRatioWarning">
                                        价值波动预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="priceFluctuationsRatioWarning">
                                        <small class="text-success">${priceFluctuationsRatioCount}条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-user" style="color: #f8d750"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="contactRiskWarning">
                                        借款人风控预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="contactRiskWarning">   
                                        <small class="text-success">${com.cindata.Contact.countByCreditScoreLessThanEqualsAndAccount(com.cindata.dimension.CreditScoreRiskDimension.findByLabel("高风险")?.maxValue, this.userAccount)}条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-archive" style="color: #f8d750"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="contactCreditLevelWarning">
                                        个人信用等级预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="contactCreditLevelWarning">
                                        <small class="text-success">5条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-shield text-success"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="publicOpinionWarning">
                                        舆情预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="publicOpinionWarning">
                                    <small class="text-success">5条</small>
                                    </g:link>
                                </td>
                            </tr>
                            <tr>

                                %{--<td>--}%
                                    %{--<i class="fa fa-exclamation-triangle" style="color: #f49b3b"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="concentrationWarning">
                                        集中度预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="concentrationWarning">
                                        <small class="text-success">${concentrationCount}条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-chain" style="color: #f49b3b"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="contactOverdueWarning">
                                        个人逾期/违约
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="contactOverdueWarning">
                                        <small class="text-success">${contactOverdueCount}条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-building-o" style="color: #f49b3b"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="accountCreditLevelWarning">
                                        公司信用等级预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="accountCreditLevelWarning">
                                        <small class="text-success">3条</small>
                                    </g:link>
                                </td>
                            </tr>

                            <tr>
                                %{--<td>--}%
                                    %{--<i class="fa fa-exclamation-triangle" style="color: #ff7420"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="buildingScoreWarning">
                                        楼盘风险预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="buildingScoreWarning">
                                        <small class="text-success">${buildingScoreCount}条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-chain-broken" style="color: #ff7420"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="accountOverdueWarning">
                                            公司逾期/违约
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="accountOverdueWarning">
                                        <small class="text-success">3条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-tablet text-danger"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="cellphoneStopWarning">
                                        手机号停用预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="cellphoneStopWarning">
                                        <small class="text-success">6条</small>
                                    </g:link>
                                </td>
                            </tr>
                            <tr>
                                %{--<td>--}%
                                    %{--<i class="fa fa-exclamation-triangle text-danger"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="collateralCoverageRateWarning">
                                        押品覆盖率预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="collateralCoverageRateWarning">
                                        <small class="text-success">${collateralCoverageRateCount}条</small>
                                    </g:link>
                                </td>

                                %{--<td>--}%
                                    %{--<i class="fa fa-users text-danger"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="contactRelationsWarning">
                                        人员关系预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="contactRelationsWarning">
                                        <small class="text-success">6条</small>
                                    </g:link>
                                </td>

                                %{--<td>--}%
                                    %{--<i class="fa fa-map-marker" style="color: #f00a32"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="frequentlyWorkplaceWarning">
                                        工作地点频繁预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="frequentlyWorkplaceWarning">
                                        <small class="text-success">8条</small>
                                    </g:link>
                                </td>
                            </tr>
                            <tr>
                                %{--<td>--}%
                                    %{--<i class="fa fa-exclamation-triangle" style="color: #4fb8a2"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="effectiveMaturityWarning">
                                        押品效期到期监测
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="effectiveMaturityWarning">
                                        <small class="text-success">${effectiveMaturityCount}条</small>
                                    </g:link>
                                </td>
                                %{--<td>--}%
                                    %{--<i class="fa fa-flash" style="color: #f00a32"></i>--}%
                                %{--</td>--}%
                                <td>
                                    <g:link controller="riskWarning" action="antiFraudWarning">
                                        欺诈预警
                                    </g:link>
                                </td>
                                <td>
                                    <g:link controller="riskWarning" action="antiFraudWarning">
                                        <small class="text-success">${antiFraudCount}条</small>
                                    </g:link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="col-md-4">
        <div class="hpanel hgreen">
            <div class="panel-heading hbuilt">
                %{--<i class="fa fa-pencil-square-o text-info"></i>--}%
                工单数量
            </div>

            <div class="panel-body">

                <div class="table-responsive">
                    <table class="table text-left">
                        <tr>
                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #f6d35b"></i>--}%
                            %{--</td>--}%
                            <td>
                                <g:link controller="estate" action="estatePendingIndex">
                                    待处理：
                                </g:link>
                            </td>
                            <td>
                                <g:link controller="estate" action="estatePendingIndex">
                                    <small class="text-success">${estatePendingCount}条</small>
                                </g:link>
                            </td>
                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #f6d35b"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    告警派单：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">5条</small>
                            </td>
                        </tr>

                        <tr>
                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #dd884a"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    已处理：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">4条</small>
                            </td>
                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #dd884a"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    人工派单：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">4条</small>
                            </td>
                        </tr>

                        <tr>
                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #ed8132"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    已退回：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">6条</small>
                            </td>

                            %{--<td>--}%
                                %{--<i class="fa fa-file-text text-danger"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    严重工单：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">7条</small>
                            </td>
                        </tr>

                        <tr>

                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #1a7661"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    已完成：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">7条</small>
                            </td>

                            %{--<td>--}%
                                %{--<i class="fa fa-file-text" style="color: #ffb400"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    重要工单：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">6条</small>
                            </td>
                        </tr>

                        <tr>
                            %{--<td>--}%
                                %{--<i class="fa fa-columns" style="color: #499180"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    我的工单：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">6条</small>
                            </td>
                            %{--<td>--}%
                                %{--<i class="fa fa-columns" style="color: #499180"></i>--}%
                            %{--</td>--}%
                            <td>
                                <!-- <g:link controller="#" action="#"> -->
                                    一般工单：
                                <!-- </g:link> -->
                            </td>
                            <td>
                                <small class="text-success">6条</small>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    %{--<div class="col-md-12 warningBg">--}%
        %{--<asset:image src="split.png" class="splitImage"/>--}%
        %{--<asset:image src="title.png" class="titleImage"/>--}%
        %{--<div class="warningText text-center"><i class="fa fa-exclamation-circle text-danger" style="font-size: 25px"></i>&nbsp;&nbsp;<span style="font-size: 20px; font-weight: bold">风险指标</span></div>--}%
    %{--</div>--}%

    <!-- <div class="col-md-3">
        <div class="hpanel">
            <div class="hpanel">
                <div class="panel-body">

                    <div class="input-group m-b">
                        <span class="input-group-addon">楼盘风险</span>
                        <g:select class="form-control" name="type" id="type" from="${com.cindata.dictionary.RiskWarningDealTypeDict.list()}" optionValue="name" optionKey="id" noSelection="${['': '请选择楼盘风险']}"/>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>

                    <label class="text-left" style="margin-top: 10px;">
                        北京市昌平区太平庄东一路16号天通苑一区
                    </label>

                    %{--echarts--}%
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="sixStart" class="text-center" style="width: 100%;height:283px;text-align: center;margin-top: 20px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="hpanel">
            <div class="hpanel">
                <div class="panel-body">

                    <div class="input-group m-b">
                        <span class="input-group-addon">个人风控</span>
                        <g:select class="form-control" name="priceFluctuationsRatio" from="${com.cindata.Estate.constrainedProperties.priceFluctuationsRatio.inList}" noSelection="${['': '请选择价值波动率']}"/>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>

                    <label class="text-left" style="margin-top: 10px;">
                        广州市天河区天河一街12栋1022号
                    </label>

                    %{--echarts--}%
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="main_2" class="text-center" style="width: 100%;height:283px;text-align: center;margin-top: 20px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="hpanel">
            <div class="hpanel">
                <div class="panel-body">

                    <div class="input-group m-b">
                        <span class="input-group-addon">个人风控</span>
                        <g:select class="form-control" name="contactRiskWarning" from="[[id: '1', name: '多头借贷信息'], [id: '2', name: '逾期记录']]" optionValue="name" optionKey="id" noSelection="${['': '请选择个人风控']}"/>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>


                    <label class="text-left" style="margin-top: 10px;">
                        姓名：张三 &nbsp;&nbsp; 身份证号：230184199802162545
                    </label>

                    %{--echarts--}%
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="sixStarta" class="text-center" style="width: 100%;height:283px;text-align: center;margin-top: 20px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="hpanel">
            <div class="hpanel">
                <div class="panel-body" style="height: 427px;">

                    <div class="input-group m-b">
                        <span class="input-group-addon">舆情信息</span>
                        <g:select class="form-control"  name="contactRiskWarning" from="[[id: '1', name: '自热灾害'], [id: '2', name: '社会因素']]" optionValue="name" optionKey="id" noSelection="${['': '请选择舆情信息']}"/>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>

                    <label class="text-left" style="margin-top: 10px;">
                        广东省深圳市南山区南山智园12栋
                    </label>

                    %{--echarts--}%
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="main_4" class="text-center" style="width: 100%;height:283px;text-align: center"></div>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div> -->

</div>

</div>

<asset:javascript src="echarts/echarts-all-3.js" />

%{--main2--}%
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main_2'));

    // 指定图表的配置项和数据
    var option2 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新房','二手房'],
            bottom:'bottom'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false
        },
        yAxis: [{
            type: 'value',
            scale: true,
            name: '价值',
            boundaryGap: false
        //boundaryGap: ['20%', '20%'] // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
        }
        ],
        series: [{
            name: '新房',
            type: 'line'
        }, {
            name: '二手房',
            type: 'line'
        }]
    };
    var tt2 = "${districtX}".split(",")
//    var a2 = ['a','b','c','d','e'];
    var a2 = ['','','','',''];
    $.each(tt2,function(){
        a2.push(this.toString())
    })
    option2.xAxis.data = a2
    option2.series[0].data = [0,12,825,151,12]
    option2.series[1].data = [20,512,25,11,123]
    myChart2.setOption(option2);
</script>

%{--贷款性质面积--}%
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart4 = echarts.init(document.getElementById('main_4'));
    var option4 = {
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
//            top: '60px',
            data: ['洪涝','地震','火灾'],
            bottom:'bottom'
        },

        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '60%',
                center: ['50%', '50%'],
                data:[
                    {value:${(25)}, name:'洪涝',label:{show:false},labelLine:{show:false}},
                    {value:${(41)}, name:'地震',label:{show:false},labelLine:{show:false}},
                    {value:${(22)}, name:'火灾',label:{show:false},labelLine:{show:false}}
                ],
                itemStyle: {
                    emphasis: {
                        label:{show:false},labelLine:{show:false},
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    myChart4.setOption(option4);
</script>
%{--雷达图--}%
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('sixStart'));
    var option = {
        title: {
//            text: '基础雷达图'
        },
        tooltip: {},
        legend: {
            // data: ['流通性评分'],
            // bottom:'bottom'
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#000',
                    backgroundColor: '#fff',
                    borderRadius: 3,
                    padding: [-20,-20,-20,-20]
                }
            },
            center:['50%','55%'],
            indicator: [
                { name: '成交率', max: 5.0},
                { name: '成交周期', max: 5.0},
                { name: '挂牌率', max: 5.0},
                { name: '折价比例', max: 5.0},
                { name: '法拍次数', max: 5.0}
            ]
        },
        series: [{
//          name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            itemStyle: {
                normal: {
                    color : "#d5ebcf", // 图表中各个图区域的边框线拐点颜色 浅绿
                    lineStyle: {
                        color:"#62cb31" // 图表中各个图区域的边框线颜色 深绿
                    },
                    areaStyle: {
//                        type: 'default'
                    }
                }
            },
            data : [
                {
                    // symbol: "none",  去掉图表中各个图区域的边框线拐点
                    value : [4.1,2,3.2,4,1.1],
                    name : '流通性评分'
                }
            ]
        }]
    };
    myChart.setOption(option);

    window.onresize = function(){
        myChart.resize();
    }

</script>
%{--雷达图1--}%
<script type="text/javascript">
    var myCharta = echarts.init(document.getElementById('sixStarta'));
    var optiona = {
        title: {
//            text: '基础雷达图'
        },
        tooltip: {},
        // legend: {
        //     data: ['金额'],
        //     bottom:'bottom'
        // },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#000',
                    backgroundColor: '#fff',
                    borderRadius: 3,
                    padding: [-20,-20,-20,-20]
                }
            },
            center:['50%','55%'],
            indicator: [
                { name: '人人贷', max: 5.0},
                { name: '行用卡', max: 5.0},
                { name: '借呗', max: 5.0},
                { name: '宜人贷', max: 5.0},
                { name: '拍拍贷', max: 5.0},
            ]
        },
        series: [{
//          name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            itemStyle: {
                normal: {
                    color : "#d5ebcf", // 图表中各个图区域的边框线拐点颜色 浅绿
                    lineStyle: {
                        color:"#62cb31" // 图表中各个图区域的边框线颜色 深绿
                    },
                    areaStyle: {
//                        type: 'default'
                    }
                }
            },
            data : [
                {
                    // symbol: "none",  去掉图表中各个图区域的边框线拐点
                    value : [4.1,2,3.2,4,1.1],
                    name : '小区配套评分'
                }
            ]
        }]
    };
    myCharta.setOption(optiona);


</script>
</body>
</html>
